<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ext.ux.google.map.View Sample 2</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"> </script>

    <script type="text/javascript" src="../../Ext.ux.google.Loader.js"></script>
    <script type="text/javascript" src="../../map/Ext.ux.google.map.View.js"></script>

    <script type="text/javascript">
      Ext.onReady(function(){
        var tpl = new Ext.XTemplate(
          '<h3 class="selector">{title}</h3>',
          '<p>{description}</p>',
          '<p>{lat:substr(0,8)}/{lng:substr(0,8)}</p>'
        );

        var c = {
          lat:35.3162461234567,
          lng: 139.4199371234567,
        };

        var store = new Ext.data.SimpleStore({
          data: [
            ['data1', 'data1の説明', c.lat+0.01,c.lng+0.01],
            ['data2', 'data2の説明', c.lat,c.lng],
            ['data3', 'data3の説明', c.lat-0.01, c.lng-0.01]
          ], 
          fields: ['title','description','lat','lng']
        });

        new Ext.Viewport({
          layout: 'border',
          items:[{
            region: 'west',
            xtype: 'editorgrid',
            store: store,
            split: true,
            columns: [
              { dataIndex: 'title', header: 'タイトル', editor: new Ext.form.TextField() },
              { dataIndex: 'description', header: '説明', editor: new Ext.form.TextField() },
              { dataIndex: 'lat', header: '緯度', editor: new Ext.form.NumberField({decimalPrecision: 7}) },
              { dataIndex: 'lng', header: '経度', editor: new Ext.form.NumberField({decimalPrecision: 7}) }
            ],
            width: 500,
            sm: new Ext.grid.RowSelectionModel({
              singleSelect: true,  
              listeners: {
                rowselect: function(t,i,r){
                  var map = Ext.getCmp('mpnl');
                  var mrk = map.getMarkerById(r.id);
                  map.openInfoWindow(mrk);
                }
              }
            })
          },{
            region: 'center',
            layout: 'fit',
            xtype: 'gmapview',
            id: 'mpnl',
            store: store,
            // replace with proper api key
            apiKey: 'ABQIAAAA3HEaipgCJKasbKv8S1gdbBQRwYGrJs7PTc23wXYGvCkgV6rZmhSdnrJh9Xe77AdhJyXWHiwWb8t7pA',
            tpl: tpl,
            mapConfig: {
              lat: c.lat,
              lng: c.lng,
              zoom:14
            },
            itemSelector: 'h3.selector'
          }]
      }); 
    });
    </script>
</head>
<body>
</body>
</html>
